<template>
  <div class="container">
    dashboard

    <el-button
      type="primary"
      @click="uploadFile"
    >
      上传文件
    </el-button>

    <el-button
      type="primary"
      @click="uploadBigFile"
    >
      大文件上传
    </el-button>

    <p>
      进度: {{ percent }} %
    </p>

    <el-timeline>
      <el-timeline-item
        v-for="item of gitLogsList"
        :key="item.sha"
        :timestamp="timestamp(item)"
        placement="top"
      >
        {{ item.summary }}
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup lang="ts">
import { gitLog } from '@/api/permission'
import { fileUpload, fileUpload2, fileMerge } from '@/api/file'
import { reactive, computed, ref } from 'vue'
import { successMsg } from '@/utils/message'

const percent = ref(0)

interface gitLogsItem {
  author: string,
  date: string,
  message: string,
  sha: string,
  summary: string
}
const gitLogsList = reactive<gitLogsItem[]>([])
gitLog().then(res => {
  gitLogsList.push(...res.data)
})

const timestamp = computed(() => (item: gitLogsItem) => {
  return dayjs(item.date).format('YYYY-MM-DD HH:mm:ss')
})

// 文件上传
const uploadFile = () => {
  const input = document.createElement('input')
  input.type = 'file'
  // input.accept = '.png,.jpg,.jpeg,.gif'
  input.click()
  input.addEventListener('change', async (e: any) => {
    const file = e.target.files[0]
    // console.dir(file)
    const formData = new FormData()
    formData.append('file', file)
    const { message } = await fileUpload(formData)
    successMsg(message)
  })
}

// 大文件切片
const uploadBigFile = () => {
  const input = document.createElement('input')
  input.type = 'file'
  // input.accept = '.png,.jpg,.jpeg,.gif'
  input.click()
  input.addEventListener('change', async (e: any) => {
    const file = e.target.files[0]
    console.dir(file)

    // 切片大小 1M
    const chunkSize = 20 * 1024 * 1024
    const { size } = file
    // [ 文件名, 文件后缀 ]
    const [fname, fext] = file.name.split('.')
    let start = 0
    let index = 0
    // 上传
    while (start < size) {
      let blob = null
      if (start + chunkSize > size) {
        blob = file.slice(start, size)
      } else {
        blob = file.slice(start, start + chunkSize)
      }
      start += chunkSize
      const blobName = `${fname}.${index}.${fext}`
      const blobFile = new File([blob], blobName)
      const formData = new FormData()
      formData.append('file', blobFile)

      await fileUpload2(formData)
      index++
      const percentValue = ((start / size) * 100).toFixed(1)
      percent.value = Number(percentValue)
    }
    successMsg('上传成功,正在合并文件')
    percent.value = 100

    // 合并
    const formData = new FormData()
    formData.append('file', file)
    const { message } = await fileMerge(formData)
    successMsg(message)
  })
}
</script>

<style lang="scss" scoped>
.el-timeline {
  height: 400px;
  overflow: auto;
}
</style>
